import React, {Component} from 'react';
import {
    StyleSheet,
} from 'react-native';
import {Toast} from 'teaset'
import FastImage from 'react-native-fast-image';
import {LoaderScreen, View, Colors, Text} from 'react-native-ui-lib';
import {UltimateListView} from "react-native-ultimate-listview";

import colors from "../common/colors";
import Global from '../common/global'
import Util from '../common/util'
import Api from '../common/api'


export default class WeatherImage extends Component {

    static navigationOptions = ({navigation, screenProps}) => ({
        headerTintColor: colors.headerText,
        headerTitle: navigation.getParam('title'),
        headerStyle: {
            backgroundColor: colors.headerBg,
            borderBottomColor: colors.headerBottom,
            paddingTop: Global.paddingTop,
            height: Global.navigationHeaderHeight
        },
        headerTitleStyle: {
            alignSelf: 'center',
        },
        headerRight: <View/>,
        headerBackTitle: null
    })

    constructor(props) {
        super(props);

        this.state = {
            isLoading: false,
            imageList: null,
            list: [],
            page: 0,
            pageCount: 0
        };
    }


    renderItem = (item, index) => {
        return (
            <View bg-white marginL-10 marginT-10 center>
                <FastImage style={{width: Global.width / 2 - 15, height: Global.width / 2 - 15, marginBottom: 5}}
                           source={{uri: item.image}}
                />
                <Text text100>{item.name}</Text>
            </View>
        )
    }

    onFetch = (page = 1, startFetch, abortFetch) => {

        if (this.state.imageList) {
            let imageList = this.state.imageList
            let list = imageList.slice((page - 1) * 10, Math.min(page * 10, imageList.length))
            startFetch(list, 10);
        } else {
            Util.fetchPost(Api.imagesdetail, {
                time: this.props.navigation.getParam('title')
            })
                .then(({code, msg, data}) => {
                    if (code == '0') {
                        let imageList = data.list

                        let list = imageList.length > 10 ? imageList.slice(0, 10) : imageList
                        this.setState({
                            imageList,
                        })
                        startFetch(list, 10)
                    }else {
                        Toast.fail(msg)
                    }
                }).catch(error => {
                console.log(error)
            });
        }
    };

    renderCommentEmptyView = () => {
        return (
            <View style={{height : Global.bodyHeight}} bg-white center>
                <Text dark10 text50>暂无内容</Text>
            </View>
        )
    }

    renderPaginationFetchingView = () => {
        return (
            <View flex bg-white center>
                <LoaderScreen
                    color={Colors.blue30}
                    message="加载中..."
                    overlay
                    animation={"fadeOut"}
                />
            </View>
        )
    }

    render() {
        return (
            <View flex bg-white center>
                <UltimateListView
                    ref="_listview"
                    onFetch={this.onFetch}
                    keyExtractor={(item, index) => ("item" + index)}  //this is required when you are using FlatList
                    refreshableMode={"basic"}//basic or advanced
                    item={this.renderItem}  //this takes three params (item, index, separator)
                    numColumns={2} //to use grid layout, simply set gridColumn > 1
                    paginationFetchingView={this.renderPaginationFetchingView}
                    waitingSpinnerText={"加载中..."}
                    allLoadedText={""}
                    emptyView={this.renderCommentEmptyView}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: colors.bgColor,
    },
});
